/* eslint-disable vue/valid-v-bind */
<template>
  <div class="main">
    <!-- 保存可以参考这个方法 -->
    <!-- <div @click="onUpload">保存</div> -->
    <!-- //顶部上传按钮 -->
    <button
      type="button"
      class="xunzeimage"
      @click="onPickFile"
    > 点击上传</button>
    {{ name }}
    <!-- //把下面input隐藏,代替它选择文件 -->

    <input
      ref="fileInput"
      type="file"
      accept="image/*"
      style="display: none"
      @change="getFile"
    />
  <!-- //选择文件 -->

  <!-- <img :src="imageUrl" /> -->
  <!-- //绑定文件地址 -->
  </div>
</template>

<script>
import axios from "axios"; // 获取上传的链接
import { getToken } from "@/utils/auth";
export default {
  // name: "whatever",
  data() {
    return {
      imageUrl: "", // img绑定的src地址
      // postUrl: `${this.$baseurl.webServiceUrl}productionv2/growthProcessPicture/add`, // 需要上传到的地址
      postUrl: `${this.$baseurl.webServiceUrl}v3/growth/growthProcessPicture/add`, // 需要上传到的地址
      name: ""
    };
  },
  mounted() {
    // 第一步:先请求一下api,看看需要上传到哪里去,存到postUrl里面 ( 做了跨域配置,所以直接写成了api )
    // axios.get("api/getUploadInfo?type=image").then(res => {
    //   if (res.status === 200 && res.data) {
    //     let data = res.data.data;
    //     let postUrl = data.url;
    //     console.log(postUrl); //页面挂载后,先打印一下,拿到了需要上传到的url地址   ( 第一次有效打印 )
    //     this.postUrl = postUrl; //把地址保存下来
    //   }
    // });
  },
  methods: {
    // /growthProcessPicture/query/{pictureId}
    // 图片查询接口, 根据id获取图片
    // 第二步:再来写个方法, button代替input选择图片
    onPickFile() {
      this.$refs.fileInput.click();
    },
    // 第三步: 文件选择后, 后在页面上显示出来    转base64位的操作
    getFile(event) {
      const files = event.target.files;
      let filename = files[files.length - 1].name; // 只有一个文件
      this.name = filename
      this.$emit('imagename', filename)
      if (filename.lastIndexOf(".") <= 0) {
        return alert("请添加一张图片!"); // 判断图片是否有效
      }
      const fileReader = new FileReader(); // 内置方法new FileReader()   读取文件
      // fileReader.readAsDataURL(files[files.length - 1]);
      fileReader.readAsBinaryString(files[files.length - 1]);
      fileReader.addEventListener("load", () => {
        this.imageUrl = window.btoa(fileReader.result.toString());
        this.imageUrl = fileReader.result;
        this.$emit('child-event', this.imageUrl)
        this.image = files[files.length - 1];
        this.onUpload()
        // console.log(this.imageUrl)
      });
      // fileReader.readAsBinaryString(files[files.length - 1]);
      // fileReader.onload = function(f) {
      //   this.imageUrl = fileReader.result;
      // }
      // 到这里后, 选择图片就可以显示出来了
      // console.log(this.image)
      // 子组件向父组件传值
    },
    // 第四步: 上传文件了
    onUpload(event) {
      // alert("ss")
      // event.preventDefault();
      let fd = new FormData(); // 内置方法new FormData()  新建一个表格
      fd.append("file", this.image); // 把image添加进去
      console.log(this.image); // (       第二次有效打印           )
      axios(
        {
          method: 'POST',
          headers: {
            "sysDataBaseName": "DB_TDW1_SC",
            "accessToken": getToken("token"),
            "databaseName": getToken("databaseName"),
            "organizationList": getToken("organizationList"),
            "organizationNo": getToken("organizationNo")
          },
          url: this.postUrl,
          data: fd
        }
      )
        .then(res => {
          // 第一个参:this.postUrl就是上面保存好的要上传的地址
          // console.log(res); // (      第三次有效打印    )
          if (res.status === 200 && res.data) {
            // let data = res.data.data;
            // let imageUrl = data.url; // 上传成功 , 后台返回了一个图片地址
            // this.imageUrl = imageUrl;
            let data = res.data.data
            // console.log(data)

            this.$message.success("上传成功！")
            this.$emit('getpictureid', data.pictureNo)
          } else {
            this.$message.error("上传失败！")
          }
        })
        .catch(error => {
          this.$message.error("上传失败！")
          console.log(error);
        });
    }
  }
};
</script>
<style scoped>
.xunzeimage{
    border: 1px solid #6ecae3;
    width: 200px;
    background-color: transparent;
    line-height: 40px;
    border-radius: 4px;
    color: rgb(161, 154, 154);
    font-weight: 600;
    /* height: 40px; */
    /* margin-left: -10px; */
}
</style>
